
const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    sass = require('gulp-sass'),
    cssmin = require('gulp-clean-css'),
    babel = require('gulp-babel'),
    uglify = require('gulp-uglify'),
    del = require('del'),
    connect = require('gulp-connect'),
    { createProxyMiddleware } = require('http-proxy-middleware')

// 配置路径
const path = {
    htmlPath:{
        src:'./src/**/*.html',
        dest:'./dist'
    },
    cssPath:{
        src:'./src/sass/*.scss',
        dest:'./dist/css'
    },
    jsPath:{
        src:'./src/js/*.js',
        dest:'./dist/js'
    },
    iconPath:{
        src:'./src/*.ico',
        dest:'./dist'
    },
    imgPath:{
        src:'./src/images/*.*',
        dest:'./dist/images'
    },
    libPath:{
        src:'./src/lib/**/*.*',
        dest:'./dist/lib'
    }
}

const{htmlPath,cssPath,jsPath,iconPath,imgPath,libPath} = path

// 定制任务
const html = () => {
    return gulp.src(htmlPath.src)
        .pipe(htmlmin({
            removeComments: true, // 清除HTML注释
            collapseWhitespace: true, // 压缩HTML
            collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
            minifyJS: true, // 压缩页面JS
            minifyCSS: true // 压缩页面CSS 
          }))
        .pipe(gulp.dest(htmlPath.dest))
        .pipe(connect.reload())
}

const css = () => {
    return gulp.src(cssPath.src)
        .pipe(sass())
        .pipe(cssmin())
        .pipe(gulp.dest(cssPath.dest))
        .pipe(connect.reload())
}



const js = () => {
    return gulp.src(jsPath.src)
        .pipe(babel({
            presets: ['@babel/env']
          }))
        .pipe(uglify())
        .pipe(gulp.dest(jsPath.dest))
        .pipe(connect.reload())
}


const icon = () => gulp.src(iconPath.src).pipe(gulp.dest(iconPath.dest))
const img = () => gulp.src(imgPath.src).pipe(gulp.dest(imgPath.dest))
const lib = () => gulp.src(libPath.src).pipe(gulp.dest(libPath.dest))
const delTak = () => del('dist')


const watch = () => {
    gulp.watch(htmlPath.src,html)
    gulp.watch(cssPath.src,css)
    gulp.watch(jsPath.src,js)
}

const server = () => {
    connect.server({
        port:2011,
        livereload:true,
        root:'dist',
        middleware(){
            return [
                createProxyMiddleware('/rap2',{
                    target:'http://rap2api.taobao.org',
                    changeOrigin:true,
                    pathRewrite:{
                        '^/rap2':''
                    }
                }),
                createProxyMiddleware('/xmyx',{
                    target:'http://www.xiongmaoyouxuan.com',
                    changeOrigin:true,
                    pathRewrite:{
                        '^/xmyx':''
                    }
                })
            ]
        }
    })
}


module.exports.default = gulp.series(delTak,gulp.parallel(html,css,js,icon,img,lib,watch,server))